<template>
  <div class="fixed-box">
    <!-- 具名插槽在组件调用的时候需要同#name指定插入的内容 -->
    <slot name="fixed"></slot>
    <!-- 具名插槽的使用： <template #fixed>插入的内容</template> -->
  </div>

  <div class="box">
    <div>左</div>
    <div>
      <!-- 
        不写名称的slot是默认插槽
        插槽的作用是调用组件的地方编写要插入到组件相应位置的内容
      -->
      <slot></slot>
      <el-button @click="myclick">触发事件的按钮</el-button>
    </div>
    <div>右</div>
  </div>
  <div>
    {{ myprop }}
  </div>
</template>
<script setup>
import { ref } from 'vue';
// 给组件定义属性
defineProps(['myprop']);
// 给组件定义事件
const emit = defineEmits(['myevent']);
const myclick = () => {
  console.log('组件点击');
  // 广播事件
  emit('myevent', '事件的参数');
};
</script>
<style scoped lang="scss">
.box {
  display: flex;
  justify-content: space-between;
}
.fixed-box {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}
</style>
